/**
 * Created by yongyuehuang on 2016/12/15.
 */
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import '../assets/less/comment.less';
import { Icon, Modal } from 'antd-mobile';
import { agentImageURL } from '../utils';
import zanGrey from '../assets/svg/zan-grey.svg';
import iconEase from '../assets/svg/ease.svg';
import { formatDate } from '../utils';

function showModal() {
  Modal.operation([
    { text: '赞同', onPress: () => console.log('赞同') },
    { text: '举报', onPress: () => console.log('举报') },
    { text: '复制', onPress: () => console.log('复制') },
    { text: '回复', onPress: () => console.log('回复') }
  ]);
}

export class Comment extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isFold: this.props.isFold
    };
    this.folded = this.folded.bind(this);
  }
  folded() {
    this.setState({ isFold: !this.state.isFold });
  }
  render() {
    const { comments, isLongComment, shortCommentsNum, isFold } = this.props;
    return (
      <div className="comments-wrapper">
        <div className="comments-title-box">
          <div className="comments-title-box-left">
            {isLongComment ? comments.length : shortCommentsNum}条{isLongComment ? '长评' : '短评'}
          </div>
          {isFold ? (
            <div className="comments-title-box-right">
              {this.state.isFold ? (
                <Icon
                  className="icon-arrow"
                  type="up"
                  onClick={() => this.folded()}
                />
              ) : (
                <Icon
                  className="icon-arrow"
                  type="down"
                  onClick={() => this.folded()}
                />
              )}
            </div>
          ) : null}
        </div>
        {comments.length ? (
          comments.map((comment, index) => {
            return (
              <div
                className="comments-container"
                key={index}
                style={{ display: !this.state.isFold ? 'flex' : 'none' }}
              >
                <div
                  className="comments-avatar"
                  style={{
                    backgroundImage:
                      'url(' + agentImageURL(comment.avatar) + ')'
                  }}
                />
                <div className="comments-content-wrap">
                  <div className="comments-content-title-box">
                    <div className="comments-title">{comment.author}</div>
                    <div className="comments-zan">
                      <Icon
                        onClick={showModal}
                        className="icon-zan"
                        type={zanGrey}
                      />
                      {comment.likes}
                    </div>
                  </div>
                  <div className="comments-content">
                    {comment.content}
                    <div className="comments-time">
                      {formatDate(comment.time)}
                    </div>
                  </div>
                </div>
              </div>
            );
          })
        ) : (
          <div className="comment-empty">
            <div className="comment-empty-box">
              <Icon className="comments-icon" type={iconEase} />
              <div>深度{isLongComment ? '长评' : '短评'}虚位以待</div>
            </div>
          </div>
        )}
      </div>
    );
  }
}

//数据验证
Comment.propTypes = {
  comments: PropTypes.array.isRequired,
  isLongComment: PropTypes.bool.isRequired,
  shortCommentsNum: PropTypes.number,
  isFold: PropTypes.bool.isRequired
};
